<template>
  <div class="edit_content_warpper">
    <template v-if="hasSelection">
      <a-select v-model:value="select" style="width: 120px; margin-right: 12px">
        <template v-for="item in types" :key="item.id">
          <a-select-option :value="item.id">{{
            item.typeName
          }}</a-select-option>
        </template>
      </a-select>
    </template>

    <template v-if="hasRadio">
      <a-checkbox v-model:checked="checked">是否必选</a-checkbox>
    </template>
  </div>

  <template v-if="hasContents">
    <div class="edit_exam_warpper">
      <div class="edit_exam_header">
        <div class="left">选项文字</div>
        <div>选项操作</div>
      </div>

      <template v-for="(item, index) in exam.options" :key="item.id">
        <div class="edit_exam_option_item">
          <a-input
            v-model:value="exam.options[index].content"
            style="width: 280px"
            @change="(e) => onIputChange(e, index)"
          ></a-input>

          <a-button type="text" @click="handleAdd(index)">
            <template #icon>
              <PlusCircleOutlined />
            </template>
          </a-button>

          <a-button type="text" @click="handleDelete(index)">
            <template #icon>
              <MinusCircleOutlined />
            </template>
          </a-button>

          <a-button type="text" @click="handleUp(index)">
            <template #icon>
              <UpCircleOutlined />
            </template>
          </a-button>

          <a-button type="text" @click="handleDown(index)">
            <template #icon>
              <DownCircleOutlined />
            </template>
          </a-button>
        </div>
      </template>
    </div>
  </template>
</template>
<script lang="ts">
import { swapArray } from '@/library/util/array';
import { defaultErrorHandler } from '@/library/util/error-handler';
import { InputedEvent } from '@/model/type/InputedEvent';
import { Choose, ExamItem, QuestsType, QuestType } from '@/store/design/types';
import {
  DownCircleOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  UpCircleOutlined,
} from '@ant-design/icons-vue';
import { computed, defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
    PlusCircleOutlined,
    MinusCircleOutlined,
    UpCircleOutlined,
    DownCircleOutlined,
  },
  props: {
    hasSelection: { type: Boolean, default: true },
    hasRadio: { type: Boolean, default: true },
    exam: { type: ExamItem, default: new ExamItem() },
    /** 题目列表 */
    examList: { type: Array, default: () => [] },
    hasContents: { type: Boolean, default: true },
  },
  setup(props) {
    const checked = computed<boolean>({
      get() {
        return props.exam.require;
      },
      set(value) {
        props.exam.require = value;
      },
    });

    const types = computed<QuestType[]>(() => {
      const result: QuestType[] = [];

      (props.examList as QuestsType[]).map((item: QuestsType) =>
        item.types.map((type) => {
          if (type.id === props.exam.typeId) {
            result.push(...item.types);
          }
        }),
      );
      // console.log('result', result);
      return result;
    });

    const select = computed<number>({
      get() {
        return props.exam.typeId;
      },
      set(value) {
        props.exam.typeId = value;
      },
    });

    const onIputChange = (e: InputedEvent, index: number) => {
      try {
        if (!props.exam.options) {
          props.exam.options = [];
        }

        props.exam.options[index].content = e.target.value;
      } catch (error) {
        defaultErrorHandler(error);
      }
    };

    const inputValue = computed<string>((index: number) => {
      if (!props.exam.options) {
        props.exam.options = [];
      }
      return props.exam.options[index].content;
    });

    const defaultText = ref<string>('选项');

    // 选项重拍
    const remakeOptions = (value: Choose[]) => {
      value.map((item, index) => (item.displayOrder = index + 1));
    };

    // 添加选项
    const handleAdd = (index: number) => {
      try {
        if (!props.exam.options) {
          props.exam.options = [];
        }
        const newOptions = new Choose(
          `${defaultText.value} ${props.exam.options?.length + 1}`,
          index + 1,
        );
        props.exam.options.splice(index + 1, 0, newOptions);
        remakeOptions(props.exam.options);
      } catch (error) {
        defaultErrorHandler(error);
      }
    };

    // 删除选项
    const handleDelete = (index: number) => {
      try {
        if (!props.exam.options) {
          props.exam.options = [];
        }

        if (props.exam.options.length < 2) {
          throw new Error('请至少保留1个选项');
        }

        props.exam.options.splice(index, 1);
        remakeOptions(props.exam.options);
      } catch (error) {
        defaultErrorHandler(error);
      }
    };

    const handleUp = (index: number) => {
      try {
        if (!props.exam.options) {
          props.exam.options = [];
        }

        if (index === 0) {
          throw new Error('第一个选项不能再上移');
        }

        swapArray(props.exam.options, index - 1, index);
        remakeOptions(props.exam.options);
      } catch (error) {
        defaultErrorHandler(error);
      }
    };

    const handleDown = (index: number) => {
      try {
        if (!props.exam.options) {
          props.exam.options = [];
        }
        if (index === props.exam.options.length - 1) {
          throw new Error('最后一个选项不能再下移');
        }

        swapArray(props.exam.options, index, index + 1);
        remakeOptions(props.exam.options);
      } catch (error) {
        defaultErrorHandler(error);
      }
    };

    return {
      checked,
      types,
      select,
      onIputChange,
      handleAdd,
      handleDown,
      handleUp,
      handleDelete,
      inputValue,
    };
  },
});
</script>
<style lang="less" scoped>
.edit_content_warpper {
  padding: 10px 0;
}
.edit_exam_header {
  background-color: #e8e8e8;
  display: flex;
  margin-bottom: 12px;
  div {
    padding: 5px;
  }
  .left {
    margin-right: 214px;
  }
}
.edit_exam_option_item {
  margin-bottom: 5px;
}
</style>
